<template>
  <div class="recycle-bin-container">
    <h1>任务回收站</h1>
    <div 
      v-for="task in recycledTasks" 
      :key="task.id" 
      class="task-item"
    >
      <!-- 显示删除前的完成状态 -->
      <div :class="{ 'task-done': task.isDone }"> 
        <h3>{{ task.title }}</h3>
        <p>描述：{{ task.desc }}</p>
        <p>优先级：{{ task.priority }}</p>
        <p>截止日期：{{ task.deadline }}</p>
      </div>
      <button @click="restoreTask(task.id)">恢复任务</button>
      <button @click="permanentDelete(task.id)">永久删除</button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTaskStore } from '@/store/taskStore';

const taskStore = useTaskStore();
const recycledTasks = taskStore.getRecycledTasks;

// 恢复任务到列表
const restoreTask = (id: number) => {
  const taskIndex = taskStore.recycledTasks.findIndex(t => t.id === id);
  if (taskIndex !== -1) {
    const restoredTask = taskStore.recycledTasks.splice(taskIndex, 1)[0];
    taskStore.tasks.push(restoredTask);
  }
};

// 永久删除（从回收站移除）
const permanentDelete = (id: number) => {
  const taskIndex = taskStore.recycledTasks.findIndex(t => t.id === id);
  if (taskIndex !== -1) {
    taskStore.recycledTasks.splice(taskIndex, 1);
  }
};
</script>

<style scoped>
.recycle-bin-container {
  max-width: 700px;
  margin: 40px auto;
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.task-done {
  text-decoration: line-through;
  opacity: 0.6;
}
</style>